/*淡入淡出效果*/
var fadeFocus = new Class({
	Implements: [Events, Options],
	options: {
		'step':0,//从第几个开始播放，默认为第1个，即0
		'duration':300,//效果过渡时间
		'delay':100,//按钮反应时间
		'left':'.prev',//向前按钮
		'right':'.next',//向后按钮
		'contant':'.slider-main',//轮播主体
		'pagebtns':'.slider-nav',//轮播焦点按钮
		'periodical':3500,//自动播放时的间隔时间
		'autoplay':true //是否执行自动播放 true 或 false
	},	
	initialize: function(el, options) {
		this.setOptions(options);
		this.handle =  document.id(el);
		this.index = 0;
		this.lastIndex = 0;
		this.bound = {
			'enter': this.enter.bind(this),
			'leave': this.leave.bind(this),
			'clear': this.clear.bind(this)
		}
		this.lock = false;
		this.lastPageBtn = null;
		this.render();
		if (this.options.autoplay==true){
			this.init();
		}
	},
	init: function() {
		this.periodical = this.focus.periodical(this.options.periodical, this);
	},
	render: function() {		
		var ops = this.options, _self = this, hd = this.handle.getElement(ops.contant);
		this.hd = hd;
		this.items = hd.getElements('li');
		this.pageContainer = this.handle.getElement(ops.pagebtns);
        this.pageBtns = this.pageContainer.getElements('li');
		this.autoplay =  ops.autoplay;
		var items = this.items, btns = this.pageBtns;
		if (items.length != this.pageBtns.length) {
			//alert("分页按钮数目和图片数目不一致，请检查！");
			return;
		};
		items.each(function(item,index){
			if (index == 0) {
				item.setStyles({'position':'absolute','opacity':1,'z-index':2})
			}else{
				item.setStyles({'position':'absolute','opacity':0,'z-index':1});
			}		
			item.set('tween',{
				'duration': ops.duration,
				onComplete: function(){
					this.lock = false;
				}.bind(this)
			})
		},this);
		this.leftBtn = this.handle.getElement(ops.left);
		this.rightBtn = this.handle.getElement(ops.right);		
		this.css(0);
		this.attach();
	},
	attach: function(){
		var _self = this,
			lBtn = this.leftBtn,
			rBtn = this.rightBtn,
			hd = this.hd,
			items = this.items,
			contant = this.hd.getParent();
		
		this.pageContainer.addEvents({
            'mouseenter': function(){
                _self.pause();
            },
            'mouseleave': function(){
                _self.restart();
            }
        });
        this.pageBtns.each(function(item, index) {
			item.addEvent('mouseenter', function() {
				_self.show(index);
			});
		});
		lBtn.addEvent('click', function(){
			if(_self.lock) return;
			var index = _self.index == 0 ? _self.items.length : _self.index;
			_self.show(--index);
		});
		rBtn.addEvent('click', function() {
			if(_self.lock) return;
			_self.show(++_self.index % (items.length));
		});
		[lBtn, rBtn].each(function(item) {
			item.addEvent('mouseenter', this.bound.clear);
		}.bind(this));

		hd.addEvent('mouseenter', this.bound.enter);
		hd.addEvent('mouseleave', this.bound.leave);	
	},
	focus: function(){
		var index = ++this.index % (this.items.length);
		this.show(index);
	},
	show: function(index){
		this.lock = true;
		this.index = index;
		this.hide(this.lastIndex);
		this.items[index].setStyle('z-index',2);
		this.items[index].get('tween').start('opacity',1);
		this.lastIndex = this.index;
		this.css(index);
	},
	hide: function(index){
		this.items[index].setStyle('z-index',1);
		this.items[index].get('tween').start('opacity',0);
	},
	clear:function() {
		//$clear(this.timer);
		window.clearInterval(this.timer);
	},
	pause: function(){
        if(!this.periodical) return;
       // $clear(this.periodical);
		window.clearInterval(this.periodical);
        this.periodical = null;    
    },
    restart: function(){
       if (this.options.autoplay==true){
			!this.periodical && this.init(); 
		}
    },
	enter: function() {
		this.pause();
	},
	leave: function() {	
		this.restart();
	},
	css: function(index) {
		var selectClass = 'active';		
		var pageBtns = this.pageBtns;
		pageBtns[index].addClass(selectClass);
		var lastBtn = this.lastPageBtn;
		if (lastBtn) lastBtn.removeClass(selectClass);
		this.lastPageBtn = pageBtns[index];
	}
});

/*上下和左右滚动效果*/
var scrollFocus = new Class({    
	Implements: [Events, Options],    
	options: {		
		'step':0,//从第几个开始播放，默认为第1个，即0
		'duration':300,//效果过渡时间
		'delay':100,//按钮反应时间
		'left':'.prev',//向前按钮
		'right':'.next',//向后按钮
		'contant':'.slider-main',//轮播主体
		'pagebtns':'.slider-nav',//轮播焦点按钮
		'periodical':3500,//自动播放时的间隔时间
		'direction':'horizontal',//滚动方式，horizontal(左右滚动)或 vertical (上下滚动)
		'autoplay':true //是否执行自动播放 true 或 false
	},    
	initialize: function(el,options) {
		this.setOptions(options);
		this.handle = document.id(el);
		this.index = 0;
		this.bound = {
			'enter': this.enter.bind(this),
			'leave': this.leave.bind(this),
			'clear': this.clear.bind(this)
		}
		this.lock = false;
		this.lastPageBtn = null;
		this.units = ['width', 'left'];
		if (this.options.direction == 'vertical') this.units = ['height', 'top'];
		this.render();
		if (this.options.autoplay==true){
			this.init();
		}
	},    
	init: function() {
		this.periodical = this.moveRight.periodical(this.options.periodical, this, [1]);
		
	},    
	render: function() {
		var _self = this,ops = this.options, units = this.units, hd = this.handle.getElement(ops.contant);
		this.hd = hd;
		this.step = ops.step;
		this.items = hd.getElements('li');
		this.pageContainer = this.handle.getElement(ops.pagebtns);
		this.pageBtns = this.pageContainer.getElements('li');    
		this.autoplay =  ops.autoplay; 
		var items = this.items;
		if (items.length != this.pageBtns.length) {
			//alert("分页按钮数目和图片数目不一致，请检查！");
			return;
		}        
		var tw = 0;
		items.each(function(item) {			
			if (ops.direction == 'horizontal') item.setStyle('float','left');
			var w = item.getStyle(units[0]).toInt(); 
			(this.step == 0) && (this.step = w);
			var coor = item.getCoordinates();
			tw += coor[units[0]];
		}, this);
		this.tw = tw;
		hd.setStyle('position','absolute');
		hd.setStyle(units[0],tw);
		hd.setStyle(units[1],0);
		this.leftBtn = this.handle.getElement(ops.left);
		this.rightBtn = this.handle.getElement(ops.right);
		
		this.css(0);
		hd.set('tween', {
			duration: this.options.duration,
			transition: Fx.Transitions.Sine.easeInOut,
			onComplete: function() {
				if (this.index == items.length) {
					items[0].setStyle('position','');
					items[0].setStyle(units[1],'');
					hd.setStyle(units[1], 0);
					this.index = 0;
				}
				if (this.index == items.length - 1) {
					items[items.length - 1].setStyle('position', '');
					items[items.length - 1].setStyle(units[1], '');
					hd.setStyle(units[1], this.step - this.tw);
				}
				this.lock = false;
			}.bind(this)
		});
		this.attach();
	},
	attach: function(){
		var _self = this, lBtn = this.leftBtn, rBtn = this.rightBtn,hd = this.hd,contant=this.hd.getParent('');;
		this.pageContainer.addEvents({
			'mouseenter': function(){
				_self.pause();
			},
			'mouseleave': function(){
				_self.restart();
			}
		});
		contant.setStyle('position','relative');
		this.pageBtns.each(function(item, index) {
			item.addEvent('mouseenter', function(){
				_self.moveTo(index);
			});
		});
		
		lBtn.addEvent('click', function() {
			if (_self.lock) return;
			_self.moveLeft(1)
		});
		rBtn.addEvent('click', function() {
			if (_self.lock) return;
			_self.moveRight(1)
		}); 
		[lBtn, rBtn].each(function(item) {
			item.addEvent('mouseenter', this.bound.clear);
		}, this);
		hd.addEvent('mouseenter', this.bound.enter);
		hd.addEvent('mouseleave', this.bound.leave);    
	},
	pause: function(){
		if(!this.periodical) return;
		//$clear(this.periodical);
		window.clearInterval(this.periodical);
		this.periodical = null;    
	},
	restart: function(){
		if (this.options.autoplay==true){
			!this.periodical && this.init(); 
		}        
	},
	
	clear: function() {
		//$clear(this.timer);
		window.clearInterval(this.timer)
	},	
	enter: function() {
		this.pause();
	},
	
	leave: function() { 
		this.restart();
	},
	
	moveTo: function(pageIndex) {
		var index = this.index;
		if (pageIndex == index) return;
		if (pageIndex > index) this.moveRight(pageIndex - index);
		else this.moveLeft(index - pageIndex);
	},
	
	css: function(index) {
		var selectClass = 'active', pageBtns = this.pageBtns, lastBtn = this.lastPageBtn;        
		pageBtns[index].addClass(selectClass);
		if (lastBtn) lastBtn.removeClass(selectClass);
		this.lastPageBtn = pageBtns[index];
	},
	
	moveRight: function(frame) {
		var units = this.units, step = this.step, items = this.items, hd = this.hd;
		this.lock = true;
		var l = hd.getStyle(units[1]).toInt();
		if (this.index == items.length - 1) {
			items[0].setStyle('position','relative');
			items[0].setStyle(units[1], this.tw);
		}
		this.index += frame;
		var index = this.index;
		this.css(index == items.length ? 0 : index);
		hd.get('tween').start(units[1], l,  - index * step);
	},    
	moveLeft: function(frame) {
		var items = this.items, tw = this.tw, units = this.units, step = this.step, hd = this.hd;
		this.lock = true;
		this.index -= frame;
		var index = this.index;
		this.css(index < 0 ? items.length - 1 : index);
		if (index < 0) {
			items[items.length - 1].setStyle('position','relative');
			items[items.length - 1].setStyle(units[1], -tw);
			this.index = items.length - 1;
		}
		var l = hd.getStyle(units[1]).toInt();
		hd.get('tween').start(units[1], l, - index * step);
	}
});